import React, {useCallback, useMemo} from 'react';
import {useDropzone} from "react-dropzone";

const LoadDocument = props => {

    const maxSize = 16777216;

    const onDrop = useCallback(acceptedFiles => {

        const formData = new FormData();
        formData.append('column_name', 'event_id');
        formData.append('column_id', props.eventId);
        formData.append('file', acceptedFiles[0]);

        props.actions.addDocument(formData, props.eventId);

    }, []);

    const {isDragActive, isDragAccept, getRootProps, getInputProps, isDragReject, rejectedFiles} = useDropzone({
        onDrop,
        /*accept: 'image/png',*/
        minSize: 0,
        maxSize,
        multiple: false
    });
    const baseStyle = {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: '0.8px',
        borderRadius: '5px',
        borderColor: '#6F64F8',
        borderStyle: 'dashed',
        backgroundColor: 'rgba(81, 166, 145, 0.07)',
        color: '#6F64F8',
        outline: 'none',
        transition: 'border .24s ease-in-out',
        minHeight: '87px'
    };
    const activeStyle = {
        boxShadow: '0px 0px 5px rgba(111, 100, 248, 0.83)'
    };
    const acceptStyle = {
        borderColor: '#6F64F8',
    };
    const rejectStyle = {
        borderColor: '#ff1744',
        color: '#ff1744'
    };
    const style = useMemo(() => ({
        ...baseStyle,
        ...(isDragActive ? activeStyle : {}),
        ...(isDragAccept ? acceptStyle : {}),
        ...(isDragReject ? rejectStyle : {})
    }), [isDragActive, isDragReject]);



    const isFileTooLarge = rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;

    return (
        <div>
            <div {...getRootProps({
                style
            })}>
                {
                    props.loadStatus ? (
                        'Загрузка...'
                    ) : (
                        <>
                            <input {...getInputProps()}/>
                            {!isDragActive && 'Нажмите здесь или добавьте файл для загрузки!'}
                            {isDragActive && !isDragReject && "Отпустите здесь!"}
                            {isDragReject && "Тип файла не принят, извините!"}
                            {isFileTooLarge && (
                                <div className="text-danger mt-2">
                                Файл слишком большой.
                                </div>
                                )}
                        </>
                    )
                }

            </div>
        </div>
    )
};

export default LoadDocument;
